<template>
  <div style="width: 80%;">
    <div style="margin-bottom: 30px;margin-left: 30px"><h2>新增分类</h2></div>
    <el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" label-width="100px" style="margin-left: 110px;"
             size="max">
      <el-form-item label="名称" prop="name">
        <el-input prefix-icon="el-icon-user" v-model="form.name" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input prefix-icon="el-icon-phone-outline" v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>

    <div style="text-align: center;margin-top: 20px">
      <el-button type="primary" @click="save" size="medium">提交</el-button>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  name: "AddCategory",
  data() {
    return {
      form: {},
      rules: {
        name: [
          {required: true, message: '分类名称不能为空', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          request.post('/category/save', this.form).then(res => {
            if (res.code === '200') {
              this.$notify.success('新增分类成功！')
              this.form = {}        //新增完成清空输入框内容
              this.$router.push("/category")   //跳转到列表界面
            } else if (res.code === '403') {
              this.$notify.warning('该分类已存在！')
            } else {
              this.$notify.error("新增分类失败！")
            }
          })
        }else (this.$notify.error("请填写分类名称"))
      })
    }
  }
}
</script>